<template>
  <el-dialog 
    :visible.sync="visible"
    :modal-append-to-body="true" 
    title="部门岗位人员" 
    width="1000px">
    <el-row :gutter="10" class="no-padding-card">
      <el-col :span="7">
        <el-card header="选择部门" shadow="never">
          <dept-tree ref="deptTree" :showSearch="true" @changeTree="handleChangeTree" />
        </el-card>
      </el-col>
      <el-col :span="17">
        <el-card header="选择岗位" shadow="never">
          <div class="position-container">
            <template v-if="positionData.length > 0">
              <el-tag v-for="item in positionData" :key="item.positionId" :effect="position.positionId === item.positionId ? 'dark' : 'plain'" @click="selectPosition(item)">{{ item.positionName }}</el-tag>
            </template>
            <template v-else>
              <empty-comp msg="暂无岗位" />
            </template>
          </div>
        </el-card>
        <el-card header="选择人员" shadow="never" style="margin-top: 20px;">
          <div class="user-container">
            <user-table size="small" ref="userTable" @handleCurrentChange="handleUserTableCurrentRow"/>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="selection-content">已选择：{{selectionMsg}}</div>
    <div slot="footer">
      <el-button type="primary" @click="handleConfirm">确定</el-button>
      <el-button type="primary" plain @click="visible = false">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
// 引用组件调用 show 方法显示

import DeptTree from '@/components/DeptTree'
import UserTable from './UserTable'
import { getPositionByDeptId } from '@/api/department'
import EmptyComp from '@/components/EmptyComp'

export default {
  props: {
    mode: { // standard标准模式（必须选择部门-岗位-人员的模式），free任意模式（可以任意选择那几级）
      type: String,
      default: 'standard'
    }
  },
  components: {
    DeptTree,
    UserTable,
    EmptyComp
  },
  data() {
    return {
      visible: false,
      positionData: [],
      position: {},
      selection: {
        deptId: '',
        deptName: '',
        positionId: '',
        positionName: '',
        userId: '',
        userName: ''
      }
    }
  },
  computed: {
    selectionMsg() {
      const dept = this.selection.deptName ? `部门：${this.selection.deptName}` : ''
      const pos = this.selection.positionName ? `岗位：${this.selection.positionName}` : ''
      const user = this.selection.userName ? `人员：${this.selection.userName}` : ''
      const deviderPos = this.selection.deptName && (this.selection.positionName || this.selection.userName) ? ' / ' : ''
      const deviderUser = (this.selection.deptName || this.selection.positionName) && this.selection.userName ? ' / ' : ''
      const msg = `${dept}${deviderPos}${pos}${deviderUser}${user}`
      return msg
    }
  },
  mounted() {
    this.getPosition()
  },
  methods: {
    show() {
      // this.position = {}
      // this.selection = {
      //   deptId: '',
      //   deptName: '',
      //   positionId: '',
      //   positionName: '',
      //   userId: '',
      //   userName: ''
      // }
      this.visible = true
      // this.$nextTick(() => {
      //   this.$refs.deptTree.refresh()
      // })
    },
    async getPosition(param = { deptId: '' }) {
      this.positionData = []
      if (!param.deptId) return
      const res = await getPositionByDeptId(param)
      if (res.data && res.data.records && res.data.records.length > 0) {
        const data = res.data.records
        this.positionData = data
      } else {
        this.positionData = []
      }
    },
    handleChangeTree(obj) { // 单选事件
      this.position = {}
      this.selection = {
        deptId:  obj.parentId,
        deptName: obj.parentName,
        positionId: '',
        positionName: '',
        userId: '',
        userName: ''
      }
      this.getPosition({ deptId: obj.parentId })
      const params = { deptId: obj.parentId}
      this.$refs.userTable.getId(params)
    },
    selectPosition(item) {
      if (this.mode === 'standard') {
        if (!this.selection.deptId) {
          this.$message.warning('请先选择部门')
          return
        }
      }
      if (this.position && this.position.positionId === item.positionId) { // 取消选择
        this.position = {}
        this.selection.positionId = ''
        this.selection.positionName = ''
      } else {
        this.position = item
        this.selection.positionId = item.positionId
        this.selection.positionName = item.positionName
      }

      this.selection.userId = ''
      this.selection.userName = ''
      const params = { 
        deptId: this.selection.deptId,
        positionId: this.selection.positionId
      }
      this.$refs.userTable.getId(params)
    },
    handleUserTableCurrentRow(row) {
      if (!row) {
        return
      }
      if (this.mode === 'standard') {
        if (!this.selection.deptId) {
          this.$message.warning('请先选择部门')
          return
        }
      }
      this.position = {
        positionId: row.positionId,
        positionName: row.positionName
      }
      this.selection.positionId = row.positionId
      this.selection.positionName = row.positionName
      this.selection.userId = row.userId
      this.selection.userName = row.name
    },
    handleConfirm() {
      if (this.mode === 'standard') {
        if (!this.selection.deptId) {
          this.$message.warning('请先选择部门')
          return
        }
        // if (!this.selection.deptId) {
        //   this.$message.warning('请先选择岗位')
        //   return
        // }
        if (!this.selection.userId) {
          this.$message.warning('请先选择人员')
          return
        }
      }
      this.visible = false
      this.$emit('handleSelected', this.selection)
    }
  }
}
</script>

<style lang="scss" scoped>
  .no-padding-card {
    .el-card__header {
      padding: 5px 15px;
    }
    .el-card__body {
      padding: 15px;
    }
  }
  .position-container {
    max-height: 160px;
    overflow-y: auto;
    .el-tag {
      cursor: pointer;
    }
    .el-tag+.el-tag {
      margin-left: 10px;
    }
  }
  .user-container {
    // height: 320px;
    // overflow-y: auto;
  }
  .selection-content {
    padding: 15px;
  }
</style>